.character-box {
	position: relative;
	display: inline-flex;
	height: 110px;
	width: 88px;
	background-color: rgb(233, 229, 220);
	border-radius: 6px;
	margin: 0 6px 14px;
	box-shadow: 0 0 0.21875rem #666;
}

.character-box .background,
.character-box .main {
	display: inline-block;
	width: 88px;
	height: 88px;
}

.character-box .element {
	position: absolute;
	width: 20px;
	height: 20px;
	left: 2px;
	top: 2px;
	z-index: 101;
}

.character-box .background {
	position: relative;
	z-index: 0;
	border-radius: 6px 6px 0 0;
}

.character-box .main {
	position: absolute;
}

.character-box .corner {
	position: absolute;
	right: 0;
	bottom: 20%;
	height: 16%;
	width: 20%;
	background-image: url("");
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.character-box .char-info {
	position: absolute;
	display: block;
	bottom: 0;
	width: 100%;
	height: 22px;
	line-height: 22px;
	text-align: center;
	font-size: 10px;
}

.char-info .level {
	color: rgb(0, 176, 80);
	margin-right: 4px;
}

.char-info .fetter {
	color: rgb(231, 13, 177);
}